<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="title" label="文章标题" width="180" />
    <el-table-column prop="content" label="文章内容" width="180" />
    <el-table-column prop="status" label="状态" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 编辑框 -->
  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="文章标题" :label-width="100">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="文章内容" :label-width="100">
        <el-input v-model="form.content" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否公开" :label-width="100">
        <el-switch v-model="form.status" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editArtile"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { DelArticle, EditArticle, GetArticle } from "@/api/article";
import { ref } from "vue";
//渲染列表
LoadList();
let list = ref([]);
function LoadList() {
  GetArticle().then((r) => {
    console.log(r.data);
    list.value = r.data;
  });
}
//修改
const form = ref({
  title: "",
  content: "",
  status: false,
  id: "",
});
const dialogFormVisible = ref(false);
function handleEdit(index, row) {
  console.log(row);
  form.value.title = row.title;
  form.value.content = row.content;
  form.value.status = row.status;
  form.value.id = row.id;
  console.log(form.value);
  dialogFormVisible.value = true;
}
function editArtile() {
  EditArticle(
    form.value.id,
    form.value.title,
    form.value.content,
    form.value.status
  ).then((r) => {
    console.log(r.data);
    LoadList();
    dialogFormVisible.value = false;
  });
}

//删除
function handleDelete(index, row) {
  console.log(row);
 ElMessageBox.confirm("确定删除嘛", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      DelArticle(row.id).then((r) => {
        console.log(r.data);
        LoadList();
         ElMessage({
        type: "success",
        message: "删除成功",
      });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}
</script>
<style></style>
